<template>
  <el-table
    v-loading="loading"
    :data="tableData"
    :height="height"
    border
    :header-cell-style="getRowClass"
    :row-class-name="tableRowClassName"
    style="width: 100%"
  >
    <el-table-column
      type="index"
      label="序号"
      align="center"
      width="50"
    />

    <el-table-column
      v-for="(item,index) in tableCol"
      :key="index"
      align="center"
      :prop="item.key"
      :label="item.title"
    >
      <template slot-scope="scope">
        <span v-if="item.key=='status'">{{ scope.row[item.key]|filterStatusFun(path.path) }}</span>
        <span v-else-if="item.key=='state'">{{ scope.row[item.key]=='0'?'异常':'正常' }}</span>
        <!-- webkit-line-clamp显示多少行 -->
        <span
          v-else
          :title="scope.row[item.key]"
          style="
            overflow: hidden;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            white-space: normal;
          "
        >{{ scope.row[item.key]|filterskeyVal(scope.row,item.key) }}</span>

      </template>
    </el-table-column>
    <el-table-column
      v-if="btnIsShow.operate"
      prop=""
      label="操作"
      min-width="120"
      :width="width"
      align="center"
    >
      <template slot-scope="scope">
        <div class="tableAutoBtn">
          <el-button v-show="$route.path=='/ykp/dataServer/apiadmin'" size="mini" type="text" @click="lookDoc(scope.row)">查看文档</el-button>
          <el-button v-show="$route.path=='/ykp/norealtimedata/httpaccess'" size="mini" type="text" @click="checkMonitor(scope.row)">查看监控</el-button>
          <el-button v-show="btnIsShow.detile" size="mini" type="text" @click="getDetile(scope.row)">查看详情</el-button>
          <el-button v-show="btnIsShow.exportxml==undefined?false:btnIsShow.exportxml" size="mini" type="text" @click="exportxml(scope.row)">导出xml</el-button>
          <el-button v-show="btnIsShow.monitor" size="mini" type="text" @click="getDjDetile(scope.row)">查看堆积详情</el-button>
          <el-button v-show="btnIsShow.getData==undefined?false:btnIsShow.getData" type="text" size="mini" @click="getData(scope.row)">获取数据</el-button>
          <el-button v-show="btnIsShow.update==undefined?true:btnIsShow.update" size="mini" type="text" @click="edit(scope.row)">修改</el-button>
          <el-popconfirm v-show="btnIsShow.del" title="确定删除吗？" icon-color="#f00" @confirm="deleteRow(scope.row)">
            <el-button slot="reference" size="mini" type="text">删除</el-button>
          </el-popconfirm>
          <el-button v-show="btnIsShow.getData==undefined?false:btnIsShow.getData" size="mini" type="text" @click="sendDemo(scope.row)">发送示例</el-button>
          <el-popconfirm v-show="btnIsShow.startAndEnd==undefined?false:btnIsShow.startAndEnd&&scope.row.status==0" title="确定启用吗？" icon-color="#f00" @confirm="execute(scope.row.jobId,'start')">
            <el-button slot="reference" size="mini" type="text" @click="roleDistribution(scope.row)">启动</el-button>
          </el-popconfirm>
          <el-popconfirm v-show="btnIsShow.startAndEnd==undefined?false:btnIsShow.startAndEnd&&scope.row.status==1" title="确定停止吗？" icon-color="#f00" @confirm="execute(scope.row.jobId,'stop')">
            <el-button slot="reference" size="mini" type="text" @click="sendDemo(scope.row)">停止</el-button>
          </el-popconfirm>
          <el-button v-if="btnIsShow.startAndEnd==undefined?false:btnIsShow.startAndEnd" slot="btn" size="mini" type="text" plain @click="execute(scope.row.jobId,'onec')">执行一次</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import htmixin from '@/mixins/htmixin.js'
import MiddleUtil from '@/utils/MiddleUtil'
export default {
  components: {

  },
  filters: {
    filterStatusFun(v, path) {
      if (path == '/authorityCenter/empowerAdmin') {
        return v == '1' ? '正常' : '过期'
      } else {
        return v == '0' ? '未启用' : '启用'
      }
    },
    filterskeyVal(v, row, key) {
      const str = key == 'hostport' ? row.host + ':' + row.port : v
      return str
    }
  },
  mixins: [htmixin],
  props: {
    width: {
      type: String,
      default: '120',
      required: false
    },
    height: {
      type: String,
      default: '',
      required: false
    },
    btnIsShow: {
      type: Object,
      default: () => {
        return {
          detile: false,
          operate: true,
          del: true,
          power: false
        }
      },
      required: false
    },
    tableData: {
      type: Array,
      default: [],
      required: true
    },
    tableCol: {
      type: Array,
      default: [],
      required: true
    }
  },
  data() {
    return {
      loading: false,
      path: this.$route
    }
  },
  created() {
    MiddleUtil.$on('closeLoading', () => {
      this.loading = false
    })
  },
  methods: {
    lookDoc(v) {
      // this.$emit("lookDoc")
      // console.log(window.location.href.split('#')[0]+'/dataServerShowDoc')
      // window.open(window.location.href.split('#')[0]+'/dataServerShowDoc')
      this.$router.push({path:"/dataServerShowDoc"})
      // window.open('http://58.16.4.102:27071/huatai/2025-06-18/%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3.jpg')
      // if (v.fireAddress) {
      //   window.open(v.fireAddress)
      // } else {
      //   this.$message.error('无文档地址')
      // }
    },
    checkMonitor(v) {
      this.$parent.showMonitor(v.id)
    },
    exportxml(v) {
      this.$parent.exportXmlFun(v)
    },
    isShowLoading(v) {
      this.loading = v
    },
    getData(v) {
      this.$parent.showGetData(v)
    },
    execute(v, type) {
      this.$parent.executeFun(v, type)
    },
    getDetile(v) {
      this.$emit('getDataDetileInfo', JSON.stringify(v))
    },
    getDjDetile(v) {
      // 监控页面使用
      this.$emit('getDjInfo', JSON.stringify(v))
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warningRow'
      } else {
        return ''
      }
    },
    getRowClass({ rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return 'background:#f2f5f8;fontSize:14px;color:#515a6e;'
      }
    },
    // 赋权
    editAdmin(v) {
      this.$emit('editAdminFun', JSON.stringify(v))
    },
    messageFun(v) {
      if (v.code == 200) {
        this.$emit('refresh')
        this.$message.success(v.msg)
      } else {
        this.$message.error(v.msg)
      }
    },
    deleteRow(v) {
      this.$emit('deleteSelectData', v)
    },
    sendDemo(v) {
      this.$emit('sendData', v)
    },
    // 角色分配和启动都是这个函数，要看下 bug
    roleDistribution(v) {
      this.$emit('roleDist', JSON.stringify(v))
    },
    edit(row) {
      this.$parent.editRowData(JSON.stringify(row))
    },
    queryData(callback, parame, colList) {
      this.tableCol = colList
      callback(parame).then(res => {
        this.tableData = res.data
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
  >>>.warningRow {
    background: #f2f5f8;
  }
  >>>.el-button{
    margin: 0 5px;
  }
  </style>
